<template>
  <!-- 内容区域 -->
  <div class="content-wrapper">

    <!-- 内容头部 -->
    <section class="content-header">
      <h1>
        控制面板
        <small>首页</small>
      </h1>
      <ol class="breadcrumb">
        <li><router-link to="/main/frontData"><i class="fa fa-dashboard"></i> 首页</router-link></li>
      </ol>
    </section>
    <!-- 内容头部 /-->

    <!-- 正文区域 -->
    <section class="content">

      <div class="row">
        <!-- /.col -->
        <div class="col-xs-12">
          <div class="box box-solid">
            <!-- /.box-header -->
            <div class="box-body">
              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                  <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                  <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                  <div class="item active">
                    <img src="../../public/img/b1.png" alt="First slide">

                    <div class="carousel-caption">
                      数字化系统<br>远程办公无忧
                    </div>
                  </div>
                  <div class="item">
                    <img src="../../public/img/b2.png" alt="Second slide">

                    <div class="carousel-caption">
                      大容量仓库<br>满足存储需求
                    </div>
                  </div>
                  <div class="item">
                    <img src="../../public/img/b3.png" alt="Third slide">

                    <div class="carousel-caption">
                      智能化管理<br>盘点不再费力
                    </div>
                  </div>
                </div>
                <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                  <span class="fa fa-angle-left"></span>
                </a>
                <a class="right carousel-control" href="#carousel-example-generic" data-slide="next" style="margin-right: 5vw">
                  <span class="fa fa-angle-right"></span>
                </a>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>

      <!-- 统计数值 -->
      <div class="row">
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <router-link to="/main/pendingOrderData">
            <div class="small-box bg-aqua">
              <div class="inner">
                <h3>150</h3>

                <p>待处理订单</p>
              </div>
              <div class="icon">
                <i class="ion ion-bag"></i>
              </div>
              <!--转向订单详情页面-->
            <div class="small-box-footer" href="/order/pendingOrderPage">详细 <i
                class="fa fa-arrow-circle-right"></i></div>
          </div>
          </router-link>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <router-link to="/main/productData">
            <div class="small-box bg-green">
              <div class="inner">
                <h3>53</h3>

                <p>商品总数</p>
              </div>
              <div class="icon">
                <i class="ion ion-stats-bars"></i>
              </div>
              <!--转向商品详情页面-->
              <div class="small-box-footer">详细 <i
                  class="fa fa-arrow-circle-right"></i></div>
            </div>
          </router-link>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <router-link to="/main/vendorsData">
            <div class="small-box bg-yellow">
              <div class="inner">
                <h3>44</h3>

                <p>供应商数</p>
              </div>
              <div class="icon">
                <i class="ion ion-person-add"></i>
              </div>
              <!--转向供应商详情页面-->
              <a class="small-box-footer">详细 <i
                  class="fa fa-arrow-circle-right"></i></a>
            </div>
          </router-link>
        </div>
        <!-- ./col -->
        <div class="col-lg-3 col-xs-6">
          <!-- small box -->
          <router-link to="/main/rackData">
            <div class="small-box bg-red">
              <div class="inner">
                <h3>65</h3>

                <p>货架总数</p>
              </div>
              <div class="icon">
                <i class="ion ion-pie-graph"></i>
              </div>
              <!--转向货架详情页面-->
              <a class="small-box-footer">详细 <i
                  class="fa fa-arrow-circle-right"></i></a>
            </div>
          </router-link>
        </div>
        <!-- ./col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- 正文区域 /-->

  </div>
  <!-- 内容区域 /-->
</template>

<script>
export default {
  name: "FrontPage"
}
</script>

<style scoped>

</style>
